<script setup lang="ts">
import { useMessage, NSelect, NSpace, NForm, NFormItem } from 'naive-ui'
import { reactive, ref, watch } from 'vue'
import { sendRequest } from '@/utils/api'
import type { processStatisticsModel } from '@/api/processStatistics'
import type { HttpResponse } from '@/utils/http'
import { useRoute } from 'vue-router'
import router from '@/router'
import BaseChart from '@/components/BaseChart'
import TableView from '@/components/TableView.vue'

const message = useMessage()
const route = useRoute()
const dataE = ref<any>([])
const title = ref('红榜')
const tempChartOption = ref()
const ecartsLoading = ref(false)
const form = reactive({ type: 'approvalCount', sort: 1 })
const dataIdOptions = ref([
  { label: '审批中数量', value: 'approvalCount' },
  { label: '审批通过数量', value: 'passCount' },
  { label: '审批拒绝数量', value: 'rejectCount' },
  { label: '审批撤回数量', value: 'revokeCount' },
  { label: '流程总数量', value: 'count' },
  { label: '流程完结率', value: 'endRate' },
  { label: '流程平均时间', value: 'avgDay' }
])
const sortOptions = ref([
  { label: '红榜', value: 1 },
  { label: '黑榜', value: 2 }
])
const sortOptionsUpdate = (v: number) => {
  title.value = sortOptions.value.filter((i) => i.value === v)[0].label
  form.sort = v
  getInitCharts()
}
const typeOptionsUpdate = (v: string) => {
  form.type = v
  getInitCharts()
}
const initCharts = () => {
  tempChartOption.value = {
    tooltip: {
      trigger: 'axis'
    },
    xAxis: {
      type: 'category',
      data: dataE.value.map((item: any) => {
        return item.name
      })
    },
    yAxis: {
      type: 'value',
      name: form.type === 'endRate' ? '%' : form.type === 'avgDay' ? '天' : '次数'
      // interval:1
    },
    series: [
      {
        data: dataE.value.map((item: any) => {
          return item.value
        }),
        type: 'bar'
      }
    ]
  }
}
// 获取数据
const getInitCharts = async () => {
  ecartsLoading.value = true
  const [error, res] = await sendRequest<HttpResponse<processStatisticsModel>>({
    module: 'processStatistics',
    api: 'Histogram',
    override: {
      params: {
        sort: form.sort,
        type: form.type
      }
    }
  })
  if (error) return message.error(error.message), (ecartsLoading.value = false)
  dataE.value = res.data
  await initCharts()
  ecartsLoading.value = false
}
const GoList = () => router.push('/oA/processStatistics/processStatistics')
const GoColumnar = () => router.push('/oA/processStatistics/columnar')
const GoPie = () => router.push('/oA/processStatistics/pie')

watch(
  () => route,
  () => {
    if (route.path == '/oA/processStatistics/columnar') getInitCharts()
  },
  { deep: true, immediate: true }
)
</script>

<template>
  <TableView class="role">
    <template #form>
      <NSpace justify="end">
        <NSpace>
          <img
            class="img"
            @click="GoList"
            src="@/assets/images/list.png"
          />
          <img
            class="img"
            @click="GoColumnar"
            src="@/assets/images/columnar.png"
          />
          <img
            class="img"
            @click="GoPie"
            src="@/assets/images/pie.png"
          />
        </NSpace>
      </NSpace>
    </template>

    <template #table>
      <div style="background-color: #f0f0ee; height: 100%; padding: 15rem 15rem 0">
        <NSpace>
          <NForm
            :model="form"
            label-placement="left"
            label-width="135"
          >
            <NSpace>
              <NFormItem
                label="选择类型:"
                path="type"
              >
                <NSelect
                  v-model:value="form.type"
                  :options="dataIdOptions"
                  filterable
                  @update-value="typeOptionsUpdate"
                />
              </NFormItem>
            </NSpace>
            <NSpace>
              <NFormItem
                label="选择排序:"
                path="sort"
              >
                <NSelect
                  v-model:value="form.sort"
                  :options="sortOptions"
                  filterable
                  @update-value="sortOptionsUpdate"
                />
              </NFormItem>
            </NSpace>
          </NForm>
          <div class="title">流程统计{{ title }}5</div>
        </NSpace>
        <BaseChart
          style="width: 100%; height: 550rem"
          :options="tempChartOption"
          :loading="ecartsLoading"
        />
      </div>
    </template>
  </TableView>
</template>

<style lang="scss" scoped>
.role {
  padding: 29rem 30rem 42rem;
}

.img {
  width: 30px;
  height: 30px;
  cursor: pointer;
}

.title {
  font-size: 30px;
  font-weight: 600;
  position: absolute;
  top: 15%;
  left: 50%;
}
</style>
